@charset "utf-8";
*{
    margin:0;
    padding:0;
}
$fontSize:40;
@function r($p){
    @return $p/$fontSize*1rem;
}
.web{
    font-family: 苹方;
    font-size: 0;
    >header{
        margin-top:20px;
        margin-bottom:r(43);
        font-size:0;
        display:flex;
        display:-webkit-flex;
        justify-content: space-around;
        align-items: center;
        >section{
            width:r(370);
            >img{
                width:100%;
            }
            &:nth-of-type(2){
                display: none;
            }
        }//logo
        >nav{
            display: none;
        }
        >.nav{
            font-size:0;
            width:r(1044);
            display:flex;
            display:-webkit-flex;
            justify-content: space-between;
            >li{
                cursor: pointer;
                position: relative;
                font-size: r(30);
                font-family: 宋体;
                color:#000;
                >a{
                    color:#000;
                    &:hover{
                        color:#e67958;
                    }
                }
            }
            >.border_san::after{
                content: "";
                position: absolute;
                display: inline-block;
                left: 0%;
                bottom: -50%;
                transform: translate(100%,50%);
                width: 0;
                height:0;
                border-top:r(15) solid rgb(71, 71, 71);
                border-bottom:r(10) solid transparent;
                border-left:r(10) solid transparent;
                border-right:r(10) solid transparent;
                // background: #000;
            }
        }
    }//头部
    >.banner{
        font-family: 苹方;
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        width:r(1620);
        margin:0 auto;
        margin-top:57px;
        >section{
            >.t_title{
                position: relative;
                font-size:r(30);
                color:#786ff8;
                margin-bottom:90px;
                &::before{
                    content: "";
                    position: absolute;
                    top:-5px;
                    display: inline-block;
                    width:r(228);
                    background:#786ff8;
                    height:5px;
                }
            }
            >p{
                font-size:r(48);
                margin-bottom:30px;
                // font-weight: bold;
            }
            >span{
                color:#7D7B85;
                font-size: r(24);
                display: block;
                margin-top:18px;
                margin-bottom:83px;
                line-height: 40px;
            }
            >article{
                font-size:r(36);
                background: #786ff8;
                color:#fff;
                display: inline-block;
                padding:r(25) r(105);
                border-radius: 50px;
            }
        }//左边内容
        >aside{
                cursor: pointer;
                position: relative;
                width:r(820);
                >img{
                    width:100%;
                }
                >.img_content{
                    position: absolute;
                    top:50%;
                    left:50%;
                    transform: translate(-50%,-50%);
                    width:r(600);
                    >img{
                        width:100%;
                    }
                }
        }//右边
    }//banner
    >.num{
        font-size: 0;
        display: flex;
        display: -webkit-flex;
        width:r(1550);
        justify-content: space-between;
        margin-left:r(156);
        margin-bottom:r(300);
        margin-top:r(30);
        >li{
            font-size: 0;
            font-family: Arial;
            >span{
                display: inline-block;
                color:#786ff8;
                font-size:r(65);
               
            }  
            >p{
                margin-top:26px;
                font-size: r(25);
                color:#7D7B85;
            }
            &:hover>span{
                animation: hinge 2s;
            }
        }
    }//数字
    >.middle_content{
        font-family: 微软雅黑;
        >.about{
            color: #000;
            font-size: r(40);
            text-align: center;
            margin-bottom:r(150);
        }
        >.p_content{
            color:#7D7B85;
            font-size: r(25);
            width:r(1580);
            margin: 0 auto;
            line-height: r(55);
        }//关于我们的文本
        >ul{
            position: relative;
            margin:0 auto;
            margin-top:r(143);
            margin-bottom:r(193);
            width:r(1450);
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            >li{
                text-align: center;
                width:r(657);
                padding-top:r(96);
                padding-bottom:r(57);
                border-top:5px solid #786ff8;
                border-bottom:5px solid #786ff8;
                >div{
                    display: inline-block;
                    width:r(300);
                    height: r(300);
                    margin-bottom: r(70);
                    overflow: hidden;
                    >img{
                        width:100%;
                        transition: transform 1.2s ease-in-out;
                    }
                    &:hover>img{
                        transform: scale(1.2);
                    
                    }
                }
                >p{
                    color:#7D7B85;
                    font-size: r(20);
                    margin-bottom:r(30);
                }
                >span{
                    display: inline-block;
                    width:100%;
                    text-align: center;
                    color:#000;
                    font-size:r(21);
                    margin-bottom:r(47);
                }
           
            }
      
        }
    }//中间内容
    >footer{
        position: relative;
        font-family: 微软雅黑;
        width:r(1920);
        >img{
            width:100%;
        }
        >aside{
            position: absolute;
            top:r(207);
            right:r(223);
            >p{
                font-size: r(40);
                color:#fff;
                margin-bottom:r(80);
            }
            >input{
                vertical-align: middle;
                height:r(72);
                width:r(545);
                border-top-left-radius: 50px;
                border-bottom-left-radius: 50px;
                font-size: r(14);
                border: 0;
                padding: 0 r(20);
            }
            >span{
                vertical-align: middle;
                display:inline-block;
                text-align: center;
                line-height: r(16);
                color:#786ff8;
                background: #fff;
                border-top-right-radius: 50px;
                border-bottom-right-radius: 50px;
                font-size: r(16);
                height:r(72);
                padding:r(28) r(18);
            }
        }
    }
}//web
.zz{
    display: none;
    animation: zoomIn 1s;
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    z-index:999;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    >.video_box{
        position: fixed;
        width:80vw;
        height:40vw;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        z-index:9999;
        // // padding:10vw;
        // box-sizing:content-box;
        // background: saddlebrown;
        background: rgba(0,0,0,0.5);
        video{
            width:100%; 
        }
        .x_close{
            position: absolute;
            top:5%;
            right:0%;
            transform: translate(-50%,-50%);
            z-index: 99999;
            font-size:30px;
            color:#fff;
        }
    }
}
@media only screen and (min-width: 768px)and (max-width:992px) {
    .web{
        >header{
            >section{
                >img{
                    width:100%;
                }
                &:nth-of-type(2){
                    display: none;
                }
            }//logo
            >nav{
                display: none;
            }
            >.nav{
                >li{
                    font-size: 16px;
                    font-family: 宋体;
                    color:#000;
                    >a{
                        color:#000;
                        &:hover{
                            color:#e67958;
                        }
                    }
                }
            }
        }//头部
        >.banner{
            margin-top:57px;
            >section{
                >.t_title{
                    font-size:r(30);
                    margin-bottom:80px;
                }
                >p{
                    font-size:r(48);
                    margin-bottom:25px;
                    // font-weight: bold;
                }
                >span{
                    margin-top:18px;
                    margin-bottom:30px;
                    line-height: 40px;
                }
                >article{
                    font-size:r(36);
                    padding:r(25) r(100);
                    border-radius: 50px;
                }
            }//左边内容
            >aside{
            }//右边
        }//banner
        >.num{
            display: none;
        }//数字
    }//web
}
@media only screen and (max-width: 768px) {
    .web{
        font-family: 苹方;
        font-size: 0;
        >header{
            margin:0 auto;
            margin-top:20px;
            margin-bottom:r(43);
            font-size:0;
            display:flex;
            display:-webkit-flex;
            justify-content: space-between;
            align-items: center;
            width:85%;
            >section{
                // margin-left:32px;
                width:r(150);
                >img{
                    width:100%;
                }
                &:nth-of-type(1){
                    display: none;
                }
                &:nth-of-type(2){
                    display: block;
                }
            }//logo
            >nav{
                display: flex;
                display:-webkit-flex;
                flex-direction: column;
                // flex-wrap: wrap;
                margin:0;
                padding:0;
                width:36px;
                // margin-right:32px;
                
                >span{
                    margin-bottom:5px;
                    width:25px;
                    height:3px;
                    border-radius: 3px;
                    background: #333;
                }
            }
            >.nav{
                position: absolute;
                top:5px;
                right:r(270);
                font-size:0;
                width:130px;
                display:flex;
                display:-webkit-flex;
                flex-wrap: wrap;
                z-index: 9999;
                animation: fadeIn .5s;
                border: 1px #d3d3d3 solid;
                box-shadow: 0px 1px 1px #a0a0a0;
                border-radius: 10px;
                display: none;
                >li{
                    background:#fff;
                    padding:0;
                    margin:0;
                    text-align: center;
                    padding:8px 0;
                    width: 100%;
                    font-size: 12px;
                    font-family: 宋体;
                    color:#000;
                    &:hover{
                        color:#fff;
                        background: #e67958;
                    }
                    >a{
                        color:#000;
                        &:hover{
                            color:#fff;;
                        }
                    }
                }
            }
        }//头部
        >.banner{
            font-family: 苹方;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            align-items: center;
            width:85%;
            margin:0 auto;
            margin-top:20px;
            >section{
                >.t_title{
                    position: relative;
                    font-size:r(30);
                    margin-bottom:10px;
                    &::before{
                        content: "";
                        position: absolute;
                        top:-3px;
                        display: inline-block;
                        width:r(228);
                        background:#786ff8;
                        height:3px;
                    }
                }
                >p{
                    font-size:r(48);
                    margin-bottom:10px;
                }
                >span{
                    color:#7D7B85;
                    font-size:12px;
                    display: block;
                    margin-top:18px;
                    margin-bottom:23px;
                    line-height: 25px;
                }
                >article{
                    font-size:r(36);
                    background: #786ff8;
                    color:#fff;
                    display: inline-block;
                    padding:r(25) r(105);
                    border-radius: 50px;
                }
            }//左边内容
            >aside{
                    position: relative;
                    width:r(820);
                    >img{
                        width:100%;
                    }
                    >.img_content{
                        position: absolute;
                        top:50%;
                        left:50%;
                        transform: translate(-50%,-50%);
                        width:r(600);
                        >img{
                            width:100%;
                        }
                    }
            }//右边
        }//banner
        >.num{
            // margin:0;
            width:80%;
            margin-top:30px;
        }//数字
        >.middle_content{
            font-family: 微软雅黑;
            >.about{
                color: #000;
                font-size: 12px;
                text-align: center;
                margin-bottom:r(150);
            }
            >.p_content{
                color:#7D7B85;
                font-size: 10px;
                width:85%;
                margin: 0 auto;
                line-height: 20px;
            }//关于我们的文本
            >ul{
                position: relative;
                margin:0 auto;
                margin-top:r(143);
                margin-bottom:r(193);
                width:90%;
                display: flex;
                display: -webkit-flex;
                justify-content: space-between;
                >li{
                    text-align: center;
                    border-top:2px solid #786ff8;
                    border-bottom:2px solid #786ff8;
                    >div{
                        display: inline-block;
                        width:r(300);
                        margin-bottom: r(70);
                        >img{
                            width:100%;
                        }
                    }
                    >p{
                        display: none;
                    }
                    >span{

                    }
               
                }
          
            }
        }//中间内容
        >footer{
            position: relative;
            font-family: 微软雅黑;
            width:100%;
            >img{
                width:100%;
            }
            >aside{
                position: absolute;
                top:r(207);
                right:r(223);
                >p{
                    font-size: r(40);
                    color:#fff;
                    margin-bottom:r(80);
                }
                >input{
                    display: none;
                }
                >span{
                    display: none;
                }
            }
        }
    }//web
}